<template>
  <div class="header-control">
    <div class="header-control-left">{{ props.title }}</div>
    <div class="header-control-right">
      <!-- 使用具名插槽插入用户自定义内容，当没有提供插槽内容时，显示默认按钮 -->
      <slot name="control">
        <el-button type="primary" @click="handleControl" v-if="props.controlName">{{ props.controlName }}</el-button>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  controlName: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['control'])
const handleControl = () => {
  emits('control')
}

</script>

<style lang='scss' scoped>
.header-control{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    height: 52px;
    box-sizing: border-box;
    background: #fff;
    .header-control-left{
        font-size: 18px;
        font-weight: 600;
    }
}
</style>